<script setup>
import { ref, onMounted } from 'vue'
import _axios from '@/utils/myAxios.js'
import { ElMessage } from 'element-plus'
import useRouter from '@/router/router.js'

let articleList = ref([])
let current = ref(1)
let size = ref(10)
let total = ref(1)
let hasMore = ref(true)
let keyword = ref('')

function getSearchArticle() {
    const urlParam = new URLSearchParams(window.location.hash.split("?")[1]);
    let search = urlParam.get('searchArticle')
    if(!search){
        useRouter.push('/home')
    }
    return search
}


async function getArticleList() {
    let resp = await _axios.get('/api/article/searchArticle', {
        params: {
            current: current.value,
            size: size.value,
            keyword: keyword.value
        }
    })
    if (resp.data.code == 200) {
        resp.data.data.rows.forEach(item => {
            articleList.value.push(item)
        })
        total.value = resp.data.data.total
        if (total.value <= articleList.value.length) {
            hasMore.value = false
        } else {
            current.value += 10
            hasMore.value = true
        }
    }
    else {
        ElMessage({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}

onMounted(() => {
    keyword.value = getSearchArticle()
    getArticleList()
})

async function updateViewCount(id) {
    let resp = await _axios.put(`/api/article/updateViewCount/${id}`)
    if (resp.data.code !== 200) {
        ElMessage({
            showClose: true,
            message: resp.data.message,
            type: 'error',
            appendTo: "#app",
        })
    }
}

</script>

<template>
    <div class="contentLeft">
        <div class="search-content">
            <ul>
                <li class="card" v-for="article in articleList" :key="article.id">
                    <div>
                        <div class="search-content-hd">
                            <a :href="'#/detailArticle?articleId=' + article.id" @click="updateViewCount(article.id)"
                                target="_blank">
                                <span>{{ article.title }}</span>
                            </a>
                            <p><el-icon>
                                    <Avatar />
                                </el-icon>发表于&nbsp;<el-icon>
                                    <Clock />
                                </el-icon>{{ article.createTime }}&nbsp;<el-icon>
                                    <View />
                                </el-icon>{{ article.viewCount }}次&nbsp;围观</p>
                        </div>
                        <el-button type="success" plain v-if="article.categoryName">
                            <el-icon>
                                <Discount />
                            </el-icon>分类&nbsp;<span style="font-weight: 600;">{{ article.categoryName
                                }}</span></el-button>
                        <div class="search-content-item">
                            <p>{{ article.summary }}</p>
                            <div class="img">
                                <img :src="article.thumbnail">
                            </div>
                        </div>
                    </div>
                    <div class="search-content-foot">
                        <a :href="'#/detailArticle?articleId=' + article.id" @click="updateViewCount(article.id)"
                            target="_blank"><el-button type="primary">阅读全文>></el-button></a>
                    </div>
                </li>
                <el-button v-if="hasMore" type="primary" style="width:100%;margin-top: 20px"
                    @click="getArticleList()">点击加载更多</el-button>
                <el-button v-else plain type="primary" style="width:100%;margin-top: 20px">暂无更多数据</el-button>
            </ul>
        </div>
    </div>
</template>

<style scoped>
.search-content ul {
    padding: 0;
    width: 100%;
}

.search-content ul li {
    list-style-type: none;
    padding: 20px 0;
}

.search-content-hd {
    margin-bottom: 30px;
    text-align: center;
}


.search-content-hd span {
    font-size: 24px;
    font-weight: 600;
    margin-left: 5px;
    color: #000;
}

.search-content-hd p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-content-item {
    padding: 20px;
}

.search-content-item .img {
    text-align: center;
    margin-bottom: 5px;
}

.search-content-item .img img {
    width: 70%;
}

.search-content-foot {
    text-align: center;
}
</style>